<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
		<title>blogMob</title>
		<script type="text/javascript">
            //适配移动端
			function resize() {
				var deviceWidth = document.documentElement.clientWidth;
				if (deviceWidth < 240) deviceWidth = 240;
					document.documentElement.style.cssText = 'font-size:' + (deviceWidth / 15) + 'px!important';
			}
			window.addEventListener('resize', resize);
			resize();
        </script>
        <script src="../bootstrap/js/jquery-3.1.1.min.js"></script>
	    <script src="../bootstrap/js/bootstrap.min.js"></script>
		<link rel="stylesheet" href="../bootstrap/css/bootstrap.min.css"/>
		<link rel="stylesheet" href="../css/blogMob.css"/>
	</head>
	<body>
		<nav class="navbar navbar-inverse navbar-fixed-top">
            <div class="container-fluid">  
                <div class="navbar-header">
                       <a class="navbar-brand">
                       	   <img src="../images/Web/home_logo.png"/>
                       </a>
                       <button class="navbar-toggle" data-toggle="collapse" data-target="#navbar"></button>
                </div>
                <div id="navbar" class="collapse navbar-collapse">
                    <ul class="nav navbar-nav navList">
                        <li><a href="#bps">关于球探链</a></li>
                        <li><a href="#qtl">销售计划</a></li>
                        <li><a href="#">白皮书</a></li>
                        <li><a href="#">博客</a></li>  
                    </ul>
                </div>
                <div class="cutLan">
					<span>中文</span>
	            	<img class="selectLan" src="../images/mobile/top_icon.png" alt="" />
	            </div>
            </div>
        </nav>
        <div class="lan">
			<div><a href="#">EN</a></div>
			<div><a href="#">中文</a></div>
	    </div>
	    <header class="header">
	    	<h1>您要查找什么？</h1>
	    	<div class="search">
	    		<input class="form-control blog-text search-input" placeholder="请输入搜索内容" autocomplete="off" autofocus="" tabindex="0" autocorrect="off" autocapitalize="off" spellcheck="false">
	    		<img class="search_img" src="../images/Web/blogs/help_seek_icon_selected.png"/>
	    	</div>
        </header>
        <div class="select">
        	<div class="select-list">
        		<div class="wz">文章栏目</div>
        		<div class="rq">日期归档</div>
        	</div>
        	<div class="select-wz">
				<ul>
					<li>行业资讯</li>
					<li>最新公告</li>
					<li>推广活动</li>
					<li>更新日志</li>
				</ul>        		
        	</div>
        	<div class="select-rq">
        		<dl class="select-rq-dl1">
        			<dt><span>2018年</span><span>36篇</span><img src="../images/Web/home_top_arrow.png" alt="" /></dt>
        			<dd>
        				<ul>
	        				<li><span>07月</span><span>3篇</span></li>
	        				<li><span>06月</span><span>10篇</span></li>
	        				<li><span>05月</span><span>5篇</span></li>
	        				<li><span>04月</span><span>8篇</span></li>
	        				<li><span>03月</span><span>1篇</span></li>
	        			</ul>
        			</dd>
        		</dl>
        		<dl class="select-rq-dl2">
        			<dt><span>2017年</span><span></span><img src="../images/Web/home_top_arrow.png" alt="" /></dt>
        		</dl>
        	</div>
        </div>
        <div class="article-list">
        	<article class="article">
				<dl class="art-dl">
					<dt class="art-img"><a href=""><img src="../images/Web/blogs/blogs_bg.png" alt=""></a></dt>
					<dd class="art-main">
						<h2 class="art-head"><a href="">丢掉繁杂的概念 告诉你什么是真正的区块链</a></h2>
						<p class="art-content">
							<a href="">最近都在热炒一个概念，这便是区块链，但是纵观整个行业，似乎也没有哪位能够把这个区块链给说的特别透彻，总是让人云里来雾里去，现在，便把这个新概念给揉碎了，让所有人都知道，这个东西到底是...</a>
						</p>
						<div class="art-setting">
							<div class="techgw ">CAM技术顾问</div>
							<div class="art-look"><span>1016</span>浏览</div>
							<div class="art-time">2018-05-03</div>
						</div>
					</dd>
				</dl>
			</article>
			<article class="article">
				<dl class="art-dl">
					<dt class="art-img"><a href=""><img src="../images/Web/blogs/blogs_bg.png" alt=""></a></dt>
					<dd class="art-main">
						<h2 class="art-head"><a href="">丢掉繁杂的概念 告诉你什么是真正的区块链</a></h2>
						<p class="art-content">
							<a href="">最近都在热炒一个概念，这便是区块链，但是纵观整个行业，似乎也没有哪位能够把这个区块链给说的特别透彻，总是让人云里来雾里去，现在，便把这个新概念给揉碎了，让所有人都知道，这个东西到底是...</a>
						</p>
						<div class="art-setting">
							<div class="techgw ">CAM技术顾问</div>
							<div class="art-look"><span>1016</span>浏览</div>
							<div class="art-time">2018-05-03</div>
						</div>
					</dd>
				</dl>
			</article>
			<article class="article">
				<dl class="art-dl">
					<dt class="art-img"><a href=""><img src="../images/Web/blogs/blogs_bg.png" alt=""></a></dt>
					<dd class="art-main">
						<h2 class="art-head"><a href="">丢掉繁杂的概念 告诉你什么是真正的区块链</a></h2>
						<p class="art-content">
							<a href="">最近都在热炒一个概念，这便是区块链，但是纵观整个行业，似乎也没有哪位能够把这个区块链给说的特别透彻，总是让人云里来雾里去，现在，便把这个新概念给揉碎了，让所有人都知道，这个东西到底是...</a>
						</p>
						<div class="art-setting">
							<div class="techgw ">CAM技术顾问</div>
							<div class="art-look"><span>1016</span>浏览</div>
							<div class="art-time">2018-05-03</div>
						</div>
					</dd>
				</dl>
			</article>
			<article class="article">
				<dl class="art-dl">
					<dt class="art-img"><a href=""><img src="../images/Web/blogs/blogs_bg.png" alt=""></a></dt>
					<dd class="art-main">
						<h2 class="art-head"><a href="">丢掉繁杂的概念 告诉你什么是真正的区块链</a></h2>
						<p class="art-content">
							<a href="">最近都在热炒一个概念，这便是区块链，但是纵观整个行业，似乎也没有哪位能够把这个区块链给说的特别透彻，总是让人云里来雾里去，现在，便把这个新概念给揉碎了，让所有人都知道，这个东西到底是...</a>
						</p>
						<div class="art-setting">
							<div class="techgw ">CAM技术顾问</div>
							<div class="art-look"><span>1016</span>浏览</div>
							<div class="art-time">2018-05-03</div>
						</div>
					</dd>
				</dl>
			</article>
			<article class="article">
				<dl class="art-dl">
					<dt class="art-img"><a href=""><img src="../images/Web/blogs/blogs_bg.png" alt=""></a></dt>
					<dd class="art-main">
						<h2 class="art-head"><a href="">丢掉繁杂的概念 告诉你什么是真正的区块链</a></h2>
						<p class="art-content">
							<a href="">最近都在热炒一个概念，这便是区块链，但是纵观整个行业，似乎也没有哪位能够把这个区块链给说的特别透彻，总是让人云里来雾里去，现在，便把这个新概念给揉碎了，让所有人都知道，这个东西到底是...</a>
						</p>
						<div class="art-setting">
							<div class="techgw ">CAM技术顾问</div>
							<div class="art-look"><span>1016</span>浏览</div>
							<div class="art-time">2018-05-03</div>
						</div>
					</dd>
				</dl>
			</article>
        </div>
        <div class="pagination">
			<ul class="page-list">
				<li class="page-item page-first"><a href="">上一页</a></li>
				<li class="page-item"><a href="">1</a></li>
				<li class="page-item"><a href="">2</a></li>
				<li class="page-item"><a href="">3</a></li>
				<li class="page-item page-end"><a href="">下一页</a></li>
			</ul>
		</div>
		<div class="footer">
			<div class="tx">
				<ul>
					<li><a href="https://twitter.com/FACchain"><img src="../images/Web/icon_footer_01_twitter.png"/></a></li>
					<li><a href=" "><img src="../images/Web/icon_footer_02_facebook.png"/></a></li>
					<li><a href="https://0.plus/sp/FACchain"><img src="../images/Web/icon_footer_03_telegram.png"/></a></li>
					<li><a href=" "><img src="../images/Web/icon_footer_04_medium.png"/></a></li>
					<li><a href="https://github.com/facchain/"><img src="../images/Web/icon_footer_05_github.png"/></a></li>
					<li><a href="https://weibo.com/u/6529215935"><img class="footerImg6" src="../images/Web/icon_footer_06_microblog.png"/></a></li>
				</ul>
				<p>2018© ctschain.org</p>
			</div>
		</div>
	</body>
</html>
<script type="text/javascript">
var isBegin1 = false;
$('.navbar button').click(function(){
	if(isBegin1 == false){
		$(this).css('width','0.6rem');
		$(this).css('height','0.6rem')
		$(this).css('background-color','#FFFFFF')
		$(this).css('background-image','url(../images/mobile/mobile_nav_icon02.png)');
	}else{
		$(this).css('width','0.76rem');
		$(this).css('height','0.6rem')
		$(this).css('background-image','url(../images/mobile/mobile_nav_icon01.png)');
	}
	isBegin1 = !isBegin1;
})
$('.nav').each(function(index,elem){
	$(this).click(function(e){
		if(isBegin1 == true){
			$('#navbar').removeClass('in')
			$('#navbar').attr('aria-expanded','false')
			$(".navbar button").css('width','0.76rem');
			$(".navbar button").css('height','0.6rem')
			$(".navbar button").css('background-image','url(../images/mobile/mobile_nav_icon01.png)');
		}
		isBegin1 = !isBegin1;
	})
})
	
//中英文切换按钮
$('.cutLan').click(function(){
    //取消事件冒泡
    event.stopPropagation();
    $('.lan').slideToggle(250);
});
//点击空白处隐藏弹出层，下面为滑动消失效果和淡出消失效果。
$(document).click(function(event){
    var _con = $('.lan');  // 设置目标区域
    if(!_con.is(event.target) && _con.has(event.target).length === 0){ // Mark 1
    	//$('#divTop').slideUp('slow');  //滑动消失
        $('.lan').slideUp(250);   //淡出消失
    }
});
$('.lan>div').click(function(){
    //取消事件冒泡
    event.stopPropagation();
    $('.lan').slideUp(250);
});	
//选项栏
$('.select-list>div').each(function(index,elem){
	$(this).click(function(e){
		console.log(index)
		$(this).siblings().removeClass('sel')
		$(this).addClass('sel');
		if(index == 0){
			$('.select-wz').slideToggle(200);
			$('.select-rq').slideUp(0);
		}else{
			$('.select-wz').slideUp(0);
			$('.select-rq').slideToggle(200);
		}
	})
})
//文章栏目菜单
$('.select-wz li').each(function(index,elem){
	$(this).click(function(e){
		$('.select-wz li').slideUp(100);
	})
})
//日期归档
$('.select-rq dt').each(function(index,elem){
	$(this).click(function(e){
		$(this).siblings('dd').slideToggle(100)
	})
})
//日期归档
$('.select-rq li').each(function(index,elem){
	$(this).click(function(e){
		$('.select-rq').slideUp(100);
	})
})

</script>